<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
            background-color: #F0F1F2;
        }
        *{
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: inherit;
            font-size: inherit;
            display: inline-block;
            width: 100%;
             height: 100%; 
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
        }
        .first{
             display: flex;
        }
        .container{
            width: 1345px;
            margin: 0 auto;
        }
        header{
            height: 55px;
            line-height: 55px;
            background-color: white;
        }
        .first li{
            padding-left: 8px;
            padding-right: 8px;
            height: 55px;
        }
        .first li:nth-child(2){
            position: relative;   
        }
          .first li:nth-child(3){
            position: relative;  
        }
         .first li:nth-child(4){
            position: relative;  
        }
        .first li:nth-child(6){
            position: relative;  
        } 
        .first .more{
            position: relative;
        }
        .first .second{
            position: absolute;
            width: 230px;
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            left:-85px;
            box-shadow: 0 0 2px 2px lightgray;
            display: none;
        }
       
        .first .third{
            position: absolute;
            width: 220px;
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            left:-85px; 
            box-shadow: 0 0 2px 2px lightgray;
            display: none;
        }
        .first .fourth{
            position: absolute;
            width: 220px;
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            left:-85px; 
            box-shadow: 0 0 2px 2px lightgray;
            display: none;
        }
        .first .fiveth{
            position: absolute;
            width: 220px;
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            left:-85px; 
            box-shadow: 0 0 2px 2px lightgray;
            display: none;
        }
         .first .sixth{
            position: absolute;
            width: 110px;
            background-color: white;
            left:-30px; 
            box-shadow: 0 0 2px 2px lightgray;
             display: none; 
        }
        .first .second li,
        .first .third li,
        .first .fourth li,
        .first .fiveth li
        {
            width: 100px;
            height: 30px;
            line-height: 30px;
             overflow: hidden;  
            text-overflow: ellipsis;
             white-space: nowrap; 
        }
        .first .sixth li{
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding-left: 30px;
        }
        .first .second .tu{
            background: url(01.png) -112px 0 no-repeat;
            display: inline-block;
            position: absolute; 
            width: 13px;
            height: 8px;
            left:100px;
            top: -8px;
        }
         .first .third .tu{
            background: url(01.png) -112px 0 no-repeat;
            display: inline-block;
            position: absolute; 
            width: 13px;
            height: 8px;
             left:100px; 
            top: -8px;
        }
         .first .fourth .tu{
            background: url(01.png) -112px 0 no-repeat;
            display: inline-block;
            position: absolute; 
            width: 13px;
            height: 8px;
             left:100px; 
            top: -8px;
        }
        .first .fiveth .tu{
            background: url(01.png) -112px 0 no-repeat;
            display: inline-block;
            position: absolute; 
            width: 13px;
            height: 8px;
             left:100px; 
            top: -8px;
        }
         .first .sixth .tu{
            background: url(01.png) -112px 0 no-repeat;
            display: inline-block;
            position: absolute; 
            width: 13px;
            height: 8px;
            left:50px;  
            top: -8px;
            padding-left: 0;
        }

        .first .one{
            color: #2FB3FF;
            border-bottom: 2px solid #2FB3FF;
        }
        .first>li>a:hover{
            color: red;
        }
        .first li:nth-child(2):hover .second,
        .first li:nth-child(3):hover .third,
        .first li:nth-child(4):hover .fourth,
        .first li:nth-child(6):hover .fiveth{
            display: block;
            display: flex;
        }
        .first .more:hover .sixth{
            display: block;
        }
        .first .more a:hover{
            color: black;
        }
        .first .second>li:hover,
        .first .third>li:hover,
        .first .fourth>li:hover,
        .first .fiveth>li:hover,
        .first .sixth>li:hover{  
             color: red;
        }
        .first .more span{
            background: url(01.png) -60px 0 no-repeat;
            width: 9px;
            height: 5px;
            display: inline-block;
            margin-left: 5px;
            margin-bottom:  2px;
            transition: all 0.3s;
        }
         .first .more:hover span{
             transform: rotate(180deg);
         }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <ul class="first">
                <li class="one"><a href="#">首页</a></li>
                <li>
                    <a href="#" class="aa">剧集</a>
                    <ul class="second">
                        <li class="tu"></li>
                        <li>楚乔传 TV版</li>
                        <li>春风十里不如你</li>
                        <li>镇魂街 第一季</li>
                        <li>我的前半生</li>
                        <li>醉玲珑</li>
                        <li>微微一笑很倾城</li>
                        <li>终极三国2017</li>
                        <li>三生三世十里桃花</li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="bb">电影</a>
                     <ul class="third">
                        <li class="tu"></li>
                        <li>速度与激情8</li>
                        <li>人间大炮</li>
                        <li>战狼</li>
                        <li>杀破狼2</li>
                        <li>逆时营救</li>
                        <li>记忆大师</li>
                        <li>我的外星女友</li>
                        <li>有部电影</li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="cc">综艺</a>
                    <ul class="fourth">
                        <li class="tu"></li>
                        <li>极限挑战 第三季</li>
                        <li>挑战者联盟 第三季</li>
                        <li>脑洞大开 第一季</li>
                        <li>火星情报局 第一季</li>
                        <li>暴走漫画-暴走大事件 第五季</li>
                        <li>日日煮 2017</li>
                        <li>开心俱乐部 第一部</li>
                        <li>举杯呵呵喝 2017</li>
                    </ul>
                </li>
                <li><a href="#">音乐</a></li>
                <li>
                    <a href="#">少儿</a>
                    <ul class="fiveth">
                        <li class="tu"></li>
                        <li>小猪佩琪</li>
                        <li>宝迪与好友之梦想英雄</li>
                        <li>京剧猫之信念的冒险</li>
                        <li>火星情报局 第一季</li>
                        <li>暴走漫画-暴走大事件 第五季</li>
                        <li>日日煮 2017</li>
                        <li>开心俱乐部 第一部</li>
                        <li>举杯呵呵喝 2017</li>
                    </ul>
                </li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">体育</a></li>
                <li class="more">
                    <a href="#">更多<span></span></a>
                    <ul class="sixth">
                        <li class="tu"></li>
                        <li>VR</li>
                        <li>生活</li>
                        <li>原创</li>
                        <li>排行</li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
</body>
</html>